<?php
session_start();
require_once '../config/db_config.php';

// 简单的身份验证检查（实际项目中应该有更完善的身份验证系统）
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

$conn = getDBConnection();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地点管理 - 合肥地名网</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold">地点管理</h1>
            <button onclick="openAddModal()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                添加地点
            </button>
        </div>

        <!-- 地点列表 -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <table class="min-w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类别</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">坐标</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200" id="placesList">
                    <!-- 地点数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- 添加/编辑地点的模态框 -->
    <div id="placeModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900" id="modalTitle">添加地点</h3>
                <form id="placeForm" class="mt-4">
                    <input type="hidden" id="placeId">
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2">名称</label>
                        <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                    </div>
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2">类别</label>
                        <select id="category" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                            <option value="历史文化">历史文化</option>
                            <option value="自然景观">自然景观</option>
                            <option value="艺术创意">艺术创意</option>
                            <option value="美食市集">美食市集</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2">纬度</label>
                        <input type="number" step="0.000001" id="latitude" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                    </div>
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2">经度</label>
                        <input type="number" step="0.000001" id="longitude" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                    </div>
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2">描述</label>
                        <textarea id="description" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
                    </div>
                    <div class="flex justify-end">
                        <button type="button" onclick="closeModal()" class="mr-2 px-4 py-2 text-gray-500 hover:text-gray-700">取消</button>
                        <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 加载地点列表
        function loadPlaces() {
            fetch('../api/places.php')
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        const placesList = document.getElementById('placesList');
                        placesList.innerHTML = '';
                        
                        data.data.forEach(place => {
                            placesList.innerHTML += `
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">${place.name}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">${place.category}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">${place.latitude}, ${place.longitude}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <button onclick="editPlace(${place.id})" class="text-blue-600 hover:text-blue-900 mr-3">
                                            编辑
                                        </button>
                                        <button onclick="deletePlace(${place.id})" class="text-red-600 hover:text-red-900">
                                            删除
                                        </button>
                                    </td>
                                </tr>
                            `;
                        });
                    }
                });
        }

        // 打开添加地点模态框
        function openAddModal() {
            document.getElementById('modalTitle').textContent = '添加地点';
            document.getElementById('placeId').value = '';
            document.getElementById('placeForm').reset();
            document.getElementById('placeModal').classList.remove('hidden');
        }

        // 打开编辑地点模态框
        function editPlace(id) {
            document.getElementById('modalTitle').textContent = '编辑地点';
            document.getElementById('placeId').value = id;
            
            fetch(`../api/places.php?id=${id}`)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        const place = data.data;
                        document.getElementById('name').value = place.name;
                        document.getElementById('category').value = place.category;
                        document.getElementById('latitude').value = place.latitude;
                        document.getElementById('longitude').value = place.longitude;
                        document.getElementById('description').value = place.description || '';
                        document.getElementById('placeModal').classList.remove('hidden');
                    }
                });
        }

        // 关闭模态框
        function closeModal() {
            document.getElementById('placeModal').classList.add('hidden');
        }

        // 删除地点
        function deletePlace(id) {
            if (confirm('确定要删除这个地点吗？')) {
                fetch(`../api/places.php?id=${id}`, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        loadPlaces();
                    } else {
                        alert(data.message);
                    }
                });
            }
        }

        // 表单提交处理
        document.getElementById('placeForm').onsubmit = function(e) {
            e.preventDefault();
            
            const id = document.getElementById('placeId').value;
            const data = {
                name: document.getElementById('name').value,
                category: document.getElementById('category').value,
                latitude: parseFloat(document.getElementById('latitude').value),
                longitude: parseFloat(document.getElementById('longitude').value),
                description: document.getElementById('description').value
            };

            const method = id ? 'PUT' : 'POST';
            const url = id ? `../api/places.php?id=${id}` : '../api/places.php';

            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    closeModal();
                    loadPlaces();
                } else {
                    alert(data.message);
                }
            });
        };

        // 页面加载时获取地点列表
        document.addEventListener('DOMContentLoaded', loadPlaces);
    </script>
</body>
</html> 